<template>
  <div>
    <van-nav-bar>
      <!-- 1.1左侧地址定位 -->
      <span slot="left">
        <span style="font-size:.17rem;display:inline-block;">{{this.areaSelect}}</span>
        <van-icon name="location-o"
          size=".16rem"
          color="#717b8a"
          style="position: relative; top: .03rem;
          "/>
      </span>
      <template #right>
        <van-icon name="cross" size="18" @click="goBack" />
      </template>
    </van-nav-bar>
    <!-- 2. 地址选择 -->
    <div class="box_content">
      <!-- 2.1 定位城市 -->
      <!-- 2.2 热门城市 -->
      <div class="hotcity">
        <ul>
          <li v-for="(item,idx) of indexList" :key="idx" @click="select(item)">{{item}}</li>
        </ul>
      </div>
    <!-- 2.3. 市级区列表 -->
    <!-- <van-index-bar">
      <van-index-anchor v-for="(item,idx) of cityarea" :key="idx" :index="item.initial">
        <span>{{item.initial}}</span>
        <van-cell
          v-for="(citem,cindex) of item.list"
          :key="cindex"
          :title="citem.name"
          @click="select(citem.name)"
        />
      </van-index-anchor>
    </van-index-bar> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, NavBar, Icon, IndexBar, IndexAnchor, Cell } from 'vant'
import allarea from '../../utils/city.json'
Vue.use(Search)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(IndexBar)
Vue.use(IndexAnchor)
Vue.use(Cell)
export default {
  data () {
    return {
      indexList: ['北京', '深圳', '重庆', '西安', '广州', '成都', '南京', '长沙', '杭州', '郑州', '太原', '武汉', '上海', '济南', '长春', '大连'],
      activeKey: 0,
      areaSelect: '全国', // 地址选择最终结果
      cityarea: '' // 市地址集合'
    }
  },
  mounted () {
    // console.log(this.indexList)
    // 获取市地址数据
    this.cityarea = JSON.parse(JSON.stringify(allarea.city))
    this.areaSelect = localStorage.getItem('areaSelect') ? localStorage.getItem('areaSelect') : '全国'
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    select (item) {
      this.areaSelect = item
      // console.log(this.areaSelect)
      localStorage.setItem('areaSelect', this.areaSelect)
      this.areaSelect = localStorage.getItem('areaSelect')
      // console.log(this.areaSelect)
      this.$router.replace('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.van-nav-bar {
  width:100%;
  height: .46rem;
  margin-top:.05rem;
}
/deep/.van-field__control {
    font-size: .12rem;
    color: #dbdbdb;
}
/deep/.van-nav-bar__title {
  max-width: 100%;
  margin-left:.7rem;
  margin-right: .2rem;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
/deep/.van-nav-bar .van-icon {
    color: #dbdbdb;
    font-weight: bold;
    font-size: .2rem;
}
/deep/.van-search .van-cell {
  line-height: .28rem;
  padding: 0;
}
/deep/.van-search__content {
  border-radius: .125rem;
  background: #f9f9f9;
  color:#e1e1e1;
  width: 2.4rem;
}
/deep/.van-nav-bar__left {
  padding: 0 .12rem;
  span {
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.9);
  }
}
/deep/ .van-icon-cross {
  color: black!important;
  font-weight: normal!important;
}
.box_content {
  overflow: auto;
  .hotcity {
    margin: .1rem .1rem .2rem;
    box-shadow: 0rem 0.04rem 0.08rem #cfcfcf;
    border-radius: .07rem;
    ul {
      padding: .2rem;
      height: 1.7rem;
      li {
        float: left;
        margin-right: .1rem;
        margin-bottom: .1rem;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.917);
        background-color: #FFF8F8;
        border-radius: .065rem;
        width: .615rem;
        text-align: center;
        padding: .035rem 0;
        position: relative;
      }
      li:nth-child(2n) {
        margin-right: .45rem;
      }
      li:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>
